<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>网点人员-人员信息</title>

    <link href="../../../css/user/setting.css" rel="stylesheet"/>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../../css/common.css" rel="stylesheet"/>
    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/fastclick.js"></script>
    <script src="../../../js/vue-common.js"></script>
    <script src="../../../js/api.js"></script>
    <script src="../../../js/common.js"></script>
    <style>
        .contact-user.left{
            width: 30%;
            color: #333;
            font-size: 1.3rem;
        }
        .contact-user.right{
            width: 70%;
            color: #999;
            font-size: 1.4rem;
            text-align: left;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="header-nav">
        <span>人员信息</span>
        <div class="icon"><img src="../../../img/common/btn_back.png" alt=""></div>
    </div>

    <div class="container setting">
        <div class="card-box li">

            <div class="xlb-li">
                <div class="contact-user left">姓名</div>
                <div class="contact-user right">{{form.name}}</div>
            </div>

            <div class="xlb-li">
                <div class="contact-user left">性别</div>
                <div class="contact-user right">{{errorStatusMap[form.sex]}}</div>
            </div>

            <div class="xlb-li">
                <div class="contact-user left">电话（账号）</div>
                <div @click="callPhone(form.phone)" class="contact-user right">{{form.phone}}<img style="margin-top: 1rem;float: right" src="../../../img/common/btn_phone@3x.png" alt=""></div>
            </div>


            <div class="xlb-li">
                <div class="contact-user left">所在单位</div>
                <div class="contact-user right">{{form.orgName}}</div>
            </div>

        </div>

        <div @click="showModal" class="xlb-btn-del">删除</div>

        <xlb-modal v-model="delMod" @on-click="delUser"  >
            <div class="dialog-content" slot="content">确定删除？</div>
            <div slot="footer-left">取消</div>
            <div slot="footer-right">确定</div>
        </xlb-modal>

    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            delMod: false,
            id:'',
            errorStatusMap: {
                '0': '男',
                '1': '女',
            },
            //表单参数
            form: {
                name: '',
                sex: '',
                phone: '',
                password: '',
                orgId: ''
            }
        },
        methods: {
            // 跳转新页面
            next: function () {
                redirect('pages/user/doUpdatePassword.html');
            },
            showModal:function () {
                this.delMod = !this.delMod;
            },
            closeMod: function () {
                this.delMod = !this.delMod;
            },
            userInfo:function(){
                Resource.get( USER_NET_INFO_USER_API, {id: this.id}, function (res) {
                    vm.form = res;
                })

            },
            delUser:function () {
                Resource.get(USER_NET_DEL_USER_API, {id: vm.id}, function (res) {
                    mui.toast('删除成功！')
                    changePage('pages/user/netperson/index.html');
                    mui.back();
                })
            },
            //打电话
            callPhone:function (phone) {
                goCallPhone(phone);
            }
        }
    });

    mui.plusReady(function () {
        var self = plus.webview.currentWebview();
        vm.id = self.userId;
        vm.userInfo();

    })
    //监听初始化
    document.addEventListener('changeTab', function (data) {
        vm.load = true;
        vm.id = data.detail.params.userId;
        vm.userInfo();
    })
</script>
</body>
</html>